The Audier WordPress plugin is a super customizable audio player for Elementor builder. It is an easy widget to add music, podcasts, transcription, or any other audio information to your website. The player supports both single tracks and playlist. It looks and works perfectly on different devices.
You can use self-hosted files or external links in the Audier plugin. Each player control can be configured and ordered according to your requirements and wishes using straightforward layout settings. The playlist has advanced settings that allow you to use an individual file source for each item, as well as add a title, description and image thumbnail. Feel free to add an unlimited number of players to one page without worrying about chaotic sound as the widget includes the option of pausing other players when selected one is enabled. It also supports keyboard control, initial sound setting, and many other useful functions. Make your site sound and keep users engaged with your content.
Supports self-hosted media files or an external media linkSupport Single Tracks and PlaylistCustom order and managing of player controlAuto pause all other players besides the activated oneCrafted for Elementor builderIncludes Templates for ElementorPerfect for Popular Elementor ThemesCompletely Cross-Browser Support
To better understand the capabilities of the widget, we included 5 templates in the package. These are just some examples that can inspire you to create your style. It provides you with a quick start in a few clicks.
Each element of the player can be customized through flexible style settings so you can get exactly what you want without any compromise. Change the color, typography, width and height, background color, border, margins, paddings and others for each control. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.
The Audier WordPress plugin for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Audier plugin for Elementor
Support self-hosted media files or an external media link
Playlist support
Custom order and managing of player controls
Keyboard control
Customizable player width
Initial volume settings
Looping audio toggle included
Hides volume on touch devices
Supports different languages
Flexible style settings
Responsiveness settings
Perfect for Elementor 3.0 and higher
Works well with all WordPress themes built on Elementor
Totally SEO Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 6+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with a modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
The Audio player widget can use self-hosted files or external links in the Audier plugin. Each player control can be configured and ordered according to your requirements and wishes using straightforward layout settings. The playlist has advanced settings that allow you to use an individual file source for each item, as well as add a title, description and image thumbnail.
For further work, you need Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
In the Content section, you can manage the basic settings of the Audio player widget such as source, controls, player width, loop options, etc.
General
Source – select the source of the audio file for the player:
SELF HOSTED
Use it to upload mp3 files from your website media library.
Self-hosted audio file in the Audio player widget
EXTERNAL
Use it to insert links to mp3 files from third-party resources.
External file source in the Audio player widget
PLAYLIST
Use it to display audio tracks in a playlist. When the option is enabled, a new Playlist section appears for adding audio files and additional configuration.
Player alignment – specify the player alignment (left, center, right). You can only see the difference if the player width is less than 100%.
Player width – specify the width of the player using the slider. There are several units available: px and %.
Audio
Muted – the toggle to enable/disable audio muting by default.
Loop – the toggle to enable/disable playback looping.
Pause other players – the option disables the playback of other players when you turn on the current one. This option is useful when adding multiple players on the same page.
Controls
The section allows you to add/manage/order player controls.
To add a new control, click “Add Item” and select one of the available item types: Play button, Progress bar, Duration, Current time, Volume, Next track, Previous track, Skip back, Jump forward, Loop
Add a new control in the Audio player widget
Each of the items has its own additional configurations.
Keyboard support – the toggle to enable/disable keyboard player control.
Hide volume on touch devices – the option hides volume control on touch devices.
Initial volume – specify the initial volume in the audio player using the slider.
Playlist
The section for managing the audio playlist and adding tracks.
Playlist height – set the playlist height for different devices using the slider.
Playlist track content alignment – specify the track content alignment (left, center, right) for different devices.
Playlist track image alignment – specify the track image alignment (left, center, right) for different devices. You can only see the difference if the image size is less than 100%.
Current media message – a field for entering the text of the current media message. Prepended to the title of media.
ADD NEW TRACKS TO THE PLAYLIST
To add a new track to the playlist, click “Add Item” and fill in the appropriate fields. You need to add at least two audios with source and title!
Add a new playlist track in the Audio player widget
Source – select the source of the audio file for the player: Self-hosted or External.
Audio title – a text field to enter the name of the current audio.
Audio description – a text area to enter the description of the current audio.
Audio thumbnail – The option to load a thumbnail image from the media library.
Style tab
On the styles tab of Audio player widget, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Controls box
Height – specify the height of the current element for desktops, tablets, or phones using the slider.
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Current time/Duration
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
Color– specify the font color and opacity for the text of the current block using the color picker.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Progress bar
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
Progress bar width – specify the width of the current element for desktops, tablets, or phones using the slider.
NORMAL/HOVER
The element settings for different states.
Time loaded bar– specify the color and opacity for the time load bar using the color picker.
Time total bar – specify the color and opacity for the time total bar using the color picker.
Time current bar – specify the color and opacity for the time current bar using the color picker.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Horizontal volume bar/Vertical volume bar
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
Total volume bar– specify the color and opacity for the total volume bar using the color picker.
Current volume bar – specify the color and opacity for the current volume bar using the color picker.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Playlist box
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Playlist track/Playlist current track
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Playlist track image/Playlist current track image
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
Object fit – select the image fit: Fill, Contain, Cover, Scale down, None.
Width – specify the width of the current element for desktops, tablets, or phones using the slider.
Height – specify the height of the current element for desktops, tablets, or phones using the slider.
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
Color– specify the font color and opacity for the text of the current block using the color picker.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The settings in the advanced tab of the Audio player widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.